<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/editor_all.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/lang/zh-cn/zh-cn.js"></script>


<c:if test="${message }">
	<div style="width: 98%; height: 50px;">
		<strong> 添加成功</strong>
	</div>
</c:if>
<form action="<%=basePath %>backend/article/add" method="post" id='newsForm'>
	<div class="row">
		<div class="col-sm-6 input-group">
			<span class="input-group-addon">归属</span>
			<select class="form-control" id='firstMenu' style=" width:200px; float: left; margin-right: 5px;" onchange="selectMenu()" >
				<option disabled="disabled" selected="selected">--请选择一级菜单--</option>
				<!-- 一级菜单START -->
				<c:forEach items="${menus}" var="menu">
					<c:if test="${fn:length(menu.childs)>0 }">
						<option value="${menu.id }" >${menu.name }</option>
					 </c:if>
				</c:forEach>
				<!-- 一级菜单END -->
			</select>
			<select class="form-control" id='subMenu' name='menuId'  style=" width:200px;  float: left;"><!-- id='bnkind' -->
				<option></option>
				<!-- 一级菜单START -->
				<c:forEach items="${menus}" var="menu">
					<!-- 二级菜单START -->
					<c:forEach items="${menu.childs}" var="subMenu">
						<option value="${subMenu.id }" idd="${menu.id}">${subMenu.name }</option>
					</c:forEach>
					<!-- 二级菜单END -->
				</c:forEach>
				<!-- 一级菜单END -->
			</select>
			 <span></span>
		</div>
		<br /> <br />
		<!-- Optional: clear the XS cols if their content doesn't match in height -->
		<div class="clearfix visible-xs"></div>
	</div>
	<!-- 属性选择 -->
	<div class="row"  style='margin-top: 10px;'>
		<div class="col-sm-9 input-group">
			<span class="input-group-addon">属性</span>
			<div id="propertySelectView"  style=" margin-top: -5px; float: left;">
			</div>
			<!-- 属性添加div，不可随意增加或者减少div层 -->
			<div id="propertySelect" style="display: none;">
				<div style=" width:550px; margin-top:5px;">
					<select class="form-control" id='bnkind' name='propertyId' style="width:200px; float: left; margin-right: 5px;">
						<option value="0">--属性选择，可不选--</option>
						<c:forEach items="${propertyList }"  var="property">
							<c:if test="${property.isValid }">
								<option value='${property.id }' >${property.name }</option>
							</c:if>
						</c:forEach>
					</select>
					<input class="form-control " type="text" name="propertyVale"
						 style='width:200px; height: 33px; float: left; margin-right: 5px;' />
					<input type="button" value="-" class="btn btn-info" onclick="deletePropertySelect(this)"/>
					<input type="button" value="+" class="btn btn-info" onclick="addPropertySelect(this);"/>
					
				</div>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-sm-9 input-group" style='margin-top: 10px;'>
			<span class="input-group-addon">标题</span>
			<input class="form-control " style='height: 30px; width: 627px' type="text" name="title" id="title" maxlength="30" />
			<spn></spn>
		</div>
	</div>
	<div style='margin-top: 10px;'>
		<script id="editor"></script>
	</div>
	<!-- <input type="checkbox" value="0" name='index' id='index'  />首页新闻 -->
	<input type="submit" value="完成" style="margin-left: 600px; margin-top: 10px;" class="btn btn-info" onclick="return getContent();" />

	<input id="content1" type="hidden" name="content"> <input id='belong' name='belong' type="hidden">
</form>
	
<script type="text/javascript">
//缓存二级菜单的option选项
var subMenuOptions = new Array();
setSubMenuOptions();
function setSubMenuOptions() {
	var i = 0;
	$("#subMenu option").each(function(){
		subMenuOptions[i] = $(this);
		$(this).remove();
		i ++;
	});
}

function selectMenu() {
	$("#subMenu").empty();
	
	var id = jQuery("#firstMenu option:selected").val();
	for (var i = 0; i < subMenuOptions.length; i++) {
		var sm = $(subMenuOptions[i]);
		if (sm.attr("idd") == id) {
			$("#subMenu").append(sm);
		}
	}
}

</script>
<script type="text/javascript">
/*---------------------------属性选择层控制------------------------------*/
	var apIndex = 0;	//属性索引,便于增加属性时设置表单名
	addPropertySelect(1);
	
	//添加新的属性选择div标签
	function addPropertySelect(index) {
		var propertySelect = document.getElementById("propertySelect");
		var childs = propertySelect.childNodes;
		
		var oldSelectNode = propertySelect.cloneNode(true);
		//组织属性表单名称，便于传入多个属性
		for (var i = 0; i < childs.length; i ++) {
			if (childs[i].nodeName == "DIV") {
				var cs = childs[i].childNodes;
				for (var j = 0; j < cs.length; j ++) {
					if (cs[j].nodeName.toUpperCase() == "SELECT") {
						cs[j].setAttribute("name", "ap[" + apIndex + "]." + cs[j].getAttribute("name"));
						
					}
					
					if (cs[j].nodeName.toUpperCase() == "INPUT" && cs[j].getAttribute("type") == "text") {
						cs[j].setAttribute("name", "ap[" + apIndex + "]." + cs[j].getAttribute("name"));
					}
				}
				
				apIndex ++;
			}
		}
		
		if (index != 1) {
			for (var i = 0; i < childs.length; i++)
				insertAfter(childs[i].cloneNode(true), index.parentNode);
		} else {
			var chs = oldSelectNode.childNodes;
			for (var i = 0; i < chs.length; i++)
				document.getElementById("propertySelectView").appendChild(childs[i].cloneNode(true));
		}
		
		propertySelect.innerHTML = oldSelectNode.innerHTML;
		
	}
	
	function deletePropertySelect(element) {
		element.parentNode.parentNode.removeChild(element.parentNode);
	}
	
	//在节点后插入节点
	function insertAfter(newElement, targetElement) {
   		var parent = targetElement.parentNode;
   		if ( parent.lastChild == targetElement ) {
    		// 如果最后的节点是目标元素，则直接添加。因为默认是最后
    		parent.appendChild(newElement );
   		} else {
    		//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。
    		parent.insertBefore( newElement, targetElement.nextSibling );
   		}
  	}
</script>
<script type="text/javascript">
	var ue = UE.getEditor('editor');
    function getContent() {

        var str= ue.getContent();
        $("#content1").val(str);
        
        if (jQuery("#subMenu option:selected").val() == "") {
        	promptWindow("<font color='red'>请选择归属栏目！</font>");
        	return false;
        } else if(document.getElementById('title').value.trim()=="") {
       	  promptWindow("<font color='red'>标题不能为空！</font>");
       	  document.getElementById('title').focus();
       	  return false;
       	} else if (str.length==0) {
       		promptWindow("<font color='red'>内容不能为空！</font>");    		
       		ue.focus();
       		return false;
       	}
      
        return true;
    }
</script>
